<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{common/header::head}"></th:block>
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
    <title th:text="${loginUser.nickName}+'账号管理-云沾衣诗词网-入云深处亦沾衣'">云沾衣诗词网-入云深处亦沾衣</title>

</head>
<body>
<div th:insert="~{common/header :: profile_nav}"></div>
<div class="container full">
    <div class="row" style="padding-top: 1vh;">
        <div class="col-2 bg-light" style="padding: 1vh;min-height: 74vh">
            <div th:insert="~{common/header :: user-silde}"></div>
        </div>
        <div class="col-9 col-sm-10">
            <div class="card">
                <div class="card-body">
                    <div class="col-lg-7">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-bs-toggle="tab" href="#account">账号信息</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#changePassword">修改密码</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div id="account" class="container tab-pane active">
                                <div class="mb-3 mt-3">
                                    <input type="text" th:value="${phone}" placeholder="未绑定手机号" class="form-control" readonly>
                                    <button class="btn btn-success" onclick="showPhoneModal()">绑定手机</button>
                                </div>
                                <div class="mb-3">
                                    <input type="text" th:value="${email}" readonly placeholder="未绑定邮箱" class="form-control">
                                    <button class="btn btn-success" onclick="showEmailModal()">绑定邮箱</button>
                                </div>

                            </div>
                            <div id="changePassword" class="container tab-pane fade"><br>
                                <div class="mb-3 mt-3 input-group">
                                    <input type="password" class="form-control" id="password"
                                           placeholder="密码">
                                </div>
                                <div>
                                    <input type="password" class="form-control" id="rePassword"
                                           placeholder="确认密码">
                                </div>
                                <br>
                                <button class="w-100 btn btn-primary" onclick="changePassword();"
                                        type="button">
                                    修改
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="phoneModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h3 class="modal-title">绑定手机号</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- 模态框内容 -->
            <div class="modal-body">
                <input type="text" placeholder="请输入手机号" class="form-control" id="phone">
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="bindPhone()">绑定
                </button>
            </div>

        </div>
    </div>
</div>


<!-- 模态框 -->
<div class="modal fade" id="emailModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h3 class="modal-title">绑定邮箱</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- 模态框内容 -->
            <div class="modal-body">
                <input type="text" placeholder="请输入邮箱" class="form-control" id="email">
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="bindEmail()">绑定
                </button>
            </div>

        </div>
    </div>
</div>

<div th:insert="~{common/footer ::home-footer}"></div>
<script type="text/javascript" charset="utf-8" th:src="@{/js/account.js}"></script>
</body>
</html>
